<template>
  <div class="set_message_coin">
    <div style="width: 2.5rem;height: 0" ref="width2rem"></div>
    <!--top-->
    <div class="top-header border-bottom fixed-top">
      <div class="top-back">
        <a href="javascript:history.go(-1)">返回</a>
      </div>
      <h2 class="f36 color-000">{{query.gameName}}</h2>
      <div class="top-right">
        <a href="/index.html" class="back-home"></a>
      </div>
    </div>
    <!--填写商品信息-->
          <!--风控警告提示 mt-97  -->
        <FkRemind class="Mmt-777"></FkRemind>
    <!-- <div class="order-container Mmt-177  bg-fff color-000 f30 border-bottom"> -->
      <!-- <span class="pl-15">商品类型</span> -->
      <!-- <span class="input">游戏币</span> -->
    <!-- </div> -->
<!--     <div class="order-container bg-fff f30 color-000  border-bottom">
      <span class="pl-15">游戏区服</span>
      <span class="input">{{query.showServer}}</span>
    </div> -->
    <div class="order-container Mmt-177  bg-fff color-000 f30 border-bottom">
      <div class="f30 fl pl-15" style="
        height: .6rem;
        line-height: .6rem;
      ">商品类型</div>
      <div class="f30 fr text-left" style="
        line-height: .6rem;
        height: auto;
        width: 70%;
      ">
        游戏币
      </div>
    </div>
    <div class="order-container bg-fff f30 color-000  border-bottom">
      <div class="f30 fl pl-15" style="
        height: .6rem;
        line-height: .6rem;
      ">游戏区服</div>
      <div class="f30 fr text-left" style="
        line-height: .6rem;
        height: auto;
        width: 70%;
      ">
        {{query.showServer}}
      </div>
    </div>
    <div class="order-container bg-fff f30 color-000 mt-20 border-bottom border-top" @click="showSelect(params.productUnit)">
      <span class="span-icon-xinhao">商品单位</span>
      <input maxlength="20" type="tel" placeholder="请选择商品单位" disabled :value="params.productUnit.check !== null ? params.productUnit.values[params.productUnit.check].value : null">
      <!-- <span class="input" style="left:2.4rem; color:#c7c4c4">请选择商品单位</span> -->
      <span class="fr span-pubic-icoRight"></span>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.productUnit && params.productUnit.check === null">
      <p class="f24">请选择商品单位</p>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom">
      <span class="span-icon-xinhao">出售数量</span>
      <v-input inputType="tel" :maxlength="8" inputPlaceholder="请输入游戏币数量" @writing="writing.unitNum = true" v-model.trim="params.unitNum"></v-input>
      <span class="danwei1">{{params.productUnit.check !== null ? params.productUnit.values[params.productUnit.check].value : ''}}</span>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.unitNum && (params.unitNum.length === 0 || params.unitNum == 0)">
      <p class="f24">请输入出售数量</p>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom">
      <span class="span-icon-xinhao">出售价格</span>
      <v-input inputType="tel" :saveSmallNum="2" :maxlength="6" :inputPlaceholder="'出售价格不能低于'+ MIN_PRICE +'元'" @writing="writing.price = true" v-model.trim="params.price"></v-input>
      <span class="danwei1">元</span>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.price && (params.price.length === 0 || Number(params.price) < MIN_PRICE)">
      <p class="f24">出售价格不能低于{{MIN_PRICE}}元</p>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom" v-if="singlePrice">
      <span class="pl-20">商品单价</span>
      <span class="teshu">1元 = {{singlePrice}}</span>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom">
      <span class="span-icon-xinhao">可售库存</span>
      <v-input inputType="tel" :maxlength="4" inputPlaceholder="请输入商品库存" @writing="writing.deliveryNum = true" v-model.trim="params.deliveryNum"></v-input>
      <span class="danwei1">件</span>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.deliveryNum && (params.deliveryNum.length === 0 || params.deliveryNum == 0)">
      <p class="f24">请输入库存数量</p>
    </div>
    <div v-if="params.roleLevel !== undefined">
      <div class="order-container bg-fff f30 color-000 border-bottom">
        <span class="span-icon-xinhao">角色等级</span>
        <v-input inputType="tel" :maxlength="4" inputPlaceholder="请输入角色等级" @writing="writing.roleLevel = true" v-model.trim="params.roleLevel"></v-input>
      </div>
      <!--提示-->
      <div class="contaner-qq fw border-bottom" v-if="writing.roleLevel && (params.roleLevel.length === 0 || params.roleLevel == 0)">
        <p class="f24">请输入角色等级</p>
      </div>
    </div>
    <div class="order-container bg-fff mt-20 f30 border-top border-bottom">
      <i class="tip"></i>
      <span class="pl-15">为确保出售成功，请填写本人的联系方式</span>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom">
      <span class="span-icon-xinhao">联系手机</span>
      <v-input inputType="tel" :maxlength="11" inputPlaceholder="请输入联系手机" @writing="writing.tel = true" v-model.trim="params.tel"></v-input>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.tel && (params.tel.length === 0 || params.tel == 0 || !telTrue)">
      <p class="f24 px-30">请输入正确的手机号码</p>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom">
      <span class="span-icon-xinhao">联系QQ</span>
      <v-input inputType="tel" :maxlength="11" inputPlaceholder="请输入联系QQ" @writing="writing.qq = true" v-model.trim="params.qq"></v-input>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.qq && (params.qq.length < 5 || params.qq.length > 11)">
      <p class="f24 px-30">请输入正确的QQ号码</p>
    </div>
    <div class="order-container bg-fff f30 color-000 border-bottom" @click="showSelect(params.availableDay)">
      <span class="span-icon-xinhao">发布期限</span>
      <input maxlength="20" type="tel" placeholder="请选择发布期限" disabled :value="params.availableDay.check !== null ? params.availableDay.values[params.availableDay.check].value : null">
      <span class="fr span-pubic-icoRight"></span>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="writing.availableDay && params.availableDay.check === null">
      <p class="f24">请选择发布期限</p>
    </div>
    <p class="text-center color-m1 f24 mt-20" v-if="params.availableDay.check !== null">亲，发布期限{{params.availableDay.values[params.availableDay.check].value}}天，逾期系统自动下架哦！</p>
    <div class="release mt-20 trlect-btn">
      <a class="next" @click="next()"><input class="bg-f54" type="button" value="下一步"></a>
    </div>
    <!-- 选项框 -->
    <div class="units-sold bg-fff" v-if="selectItem">
      <div class="unsold-titl f36 color-000">
        <a class="unclose fr" href="#" @click="selectItem=null"></a>{{selectItem.title}}</div>
      <div class="unsold-conn">
        <ul>
          <li v-for="(item, index) in selectItem.values" class="f30 border-top" @click="selectItem.check = index;selectItem=null" :class="{active: selectItem.check === index}">
            {{item.name}}
          </li>
        </ul>
      </div>
    </div>
    <div class="units_cover" v-if="selectItem" @click="selectItem=null"></div>
  </div>
</template>
<script>
  import inputCom from './sell_component/input.vue';
  import {mapActions} from 'vuex';
   import FkRemind from 'components/common/FkRemind';

export default {
  components: {
      'v-input': inputCom,
      FkRemind
  },
  data() {
    let query = this.$route.query
    let staticParams = {
      gameId: query.gameId,
      goodsType: query.goodsTypeId,
      serviceProviderId: query.plantId,
      regionId: query.clientId,
      serverId: query.serverId
    }
    return {
      MIN_PRICE: 0.01, // 单笔出售的最低价格
      showHint: false,
      selectItem: null, // 选择框
      params: {
        productUnit: { // 商品单位
          check: null,
          title: '商品单位',
          oldUnit: '',
          values: []
        },
        availableDay: { // 发布期限
          check: null,
          title: '发布期限',
          oldAvailableDay: '',
          values: [
            {
              value: '33',
              name: '33天',
            },
            {
              value: '27',
              name: '27天',
            },
            {
              value: '22',
              name: '22天',
            },
            {
              value: '17',
              name: '17天',
            },
            {
              value: '12',
              name: '12天',
            },
            {
              value: '7',
              name: '07天',
            },
            {
              value: '1',
              name: '01天',
            }
          ]
        },
        qq: '', // qq号
        roleLevel: '', // 角色等级
        tel: '', // 手机号码
        price: '', // 价格
        unitNum: '', // 出售数量
        deliveryNum: '' // 发布件数
      },
      writing: {
        roleLevel: false,
        productUnit: false,
        availableDay: false,
        unitNum: false,
        price: false,
        deliveryNum: false,
        qq: false,
        tel: false
      },
      goodsId: '', // 商品id，编辑的时候需要配置
      query,
        staticParams,
        
    }
  },
  computed: {
    /* 单价 */
    singlePrice() {

      if (this.params.unitNum.length !== 0 && this.params.price.length !== 0 && Number(this.params.unitNum) !== 0 && Number(this.params.price) !== 0) {
        let price = this.$MATH.numDiv(Number(this.params.unitNum), Number(this.params.price)).toFixed(2)
        if (price < 0.01) price = 0.01
        return price
      }
      else {
        return null
      }
    },
    telTrue() {
      if (!(/^1[34578]\d{9}$/.test(this.params.tel))) {
        return false;
      }
      return true
    }
  },
  created() {
    // 梦幻西游(手机游戏) 没有角色等级
    if (this.query.gameName != '梦幻西游(手机游戏)') {
      delete this.params.roleLevel
      delete this.writing.roleLevel
    }
    // 发布初始化接口
    // this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gamemoney/GetCreateBizoffer', {
    //   "categoryId": this.query.categoryId,
    //   "gameId": this.query.gameId,
    //   "gameServerId": this.query.serverId,
    //   "operatorId": this.query.clientId,
    //   "platformName": this.query.plantName
    // })
    this.$indicator.open({ spinnerType: 'fading-circle' })
  },
  /* 页面销毁前 关闭该关闭的 停止该停止的 */
  beforeDestroy() {
    this.$indicator.close() // 关闭加载中提示
  },
  mounted() {
    if (!this.query.editor) {
      this.params.tel = this.$getAccountInfo().mobilePhone || ''
    }
    this.init()
  },
  methods: {
    showSelect(item) {
      this.selectItem = item
    },
    /* 下一步 */
    next() {
      for (let key in this.writing) {
        this.writing[key] = true
      }
      this.$nextTick(() => {
        if (document.querySelector('.set_message_coin .contaner-qq'))
          document.body.scrollTop = document.querySelector('.set_message_coin .contaner-qq').offsetTop - this.$refs['width2rem'].offsetWidth
      })
      /* 代码校验信息 */
      for (let key in this.params) { // 空校验
        if (this.params[key].title) {
          if (this.params[key].check === null) return
          else continue
        }
        if (!this.params[key].toString().length) {
          return
        }
      }
      let { price, qq, tel } = this.params
      if (qq.length < 5 || qq.length > 11 || tel.length !== 11 || Number(price) < this.MIN_PRICE) return // 位数校验
      if (!this.telTrue) return // 手机号码校验
      console.log('信息正确')
      this.$indicator.open()
      Promise.all([
        function () {
          /* 商品编辑 */
          let params = {
            "availableDay": this.params.availableDay.values[this.params.availableDay.check].value, // 发布期限
            // "bizOfferId": "string", // 发布单Id
            "categoryId": this.query.categoryId, // 新大类
            "contactMobile": this.params.tel,
            "contactQQ": this.params.qq,
            "gameId": this.query.gameId,
            "gameMoneyModel": {
              "numberCount": this.params.unitNum,
              "roleLevel": this.params.roleLevel,
              // "tradingServiceType": 0, // 发货模式默认0
              "unitName": this.params.productUnit.values[this.params.productUnit.check].value
            },
            "gamePlatformId": this.query.plantId,
            "gameServerId": this.query.serverId,
            "operatorId": this.query.clientId,
            "price": this.params.price,
            "stockTotal": this.params.deliveryNum, // 库存
          }
          let url = ''
          if (this.query.editor) {
            url = this.$CONSTANTS.APIMGCoin + 'seller/gamemoney/editBizOffer'
            params.bizOfferId = this.query.goodsId
          } else {
            url = this.$CONSTANTS.APIMGCoin + 'seller/gamemoney/createBizOffer'
          }
          return this.$http.post(url, params).then(({ data }) => {
            if (data.success) {
              this.$router.push({ name: 'MGSellSuccessCoin', query: { goodsId: data.data } })
            } else {
              this.$toast(data.responseStatus.message)
            }
            return data
          })
        }.apply(this)
      ]).then(() => {
        this.$indicator.close()
      })
    },
    /* 初始化获取一些相关数据 */
    init() {
      Promise.all([
        function () {
          if (this.query.editor) {
            return this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gamemoney/getEditBizOfferModel', {
              bizOfferId: this.query.goodsId
            }).then(({data}) => {
              if (data.success) {
                this.editInitData(data.data)
              } else {
                this.$toast(data.responseStatus.message)
              }
              return
            })
          } else {
            // 发布初始化接口,后期用到
            // return this.$http.post(this.$CONSTANTS.APIMGCoin + 'seller/gamemoney/getCreateBizoffer', {
            //   "categoryId": this.query.categoryId,
            //   "gameId": this.query.gameId,
            //   "gameServerId": this.query.serverId,
            //   "operatorId": this.query.clientId,
            //   "platformName": this.query.plantName
            // })
          }
        }.apply(this),
        this.$http.post(this.$CONSTANTS.APIMGCoin + 'common/getGameMoneyForTrade', { // 获取单位接口
        "gameId": this.query.gameId,
      }).then(({ data }) => {
        if (data.success) {
          // productUnit
          let units = data.data.map(ele => {
            return {
              value: ele.unitName,
              name: ele.unitName
            }
          })
          if (units.length === 0) {
            this.$toast('该商品没有配置单位')
          }
          if (units.length === 1) {
            this.params.productUnit.check = 0
          }
          this.params.productUnit.values = units
        } else {
          this.$toast(data.responseStatus.message)
        }
        return
      })]).then(values => {
        console.log('values', values)
        this.$indicator.close()
        // 编辑 初始化选择商品单位、发布期限
        if (this.query.editor) {
          if (this.params.productUnit.oldUnit) {
            this.params.productUnit.values.forEach((v, i) => {
              if (v.value == this.params.productUnit.oldUnit) {
                this.params.productUnit.check = i
              }
            })
          }
          if (this.params.availableDay.oldAvailableDay) {
            this.params.availableDay.values.forEach((v, i) => {
              if (v.value == this.params.availableDay.oldAvailableDay) {
                this.params.availableDay.check = i
              }
            })
          }
        }
      })
    },
    /* 编辑是初始化基本所需数据 */
    editInitData(goods) {
      // this.unit = goods.unitName // 配置单位
      this.query.showServer = goods.gamePlatformName + '/' + goods.operatorName + '/' + goods.gameServerName
      this.staticParams = { // 配置staticParams
        gameId: goods.gameId,
        goodsType: 3,
        serviceProviderId: goods.gamePlatformId,
        regionId: goods.operatorId,
        serverId: goods.gameServerId
      }
      this.params.productUnit.oldUnit = goods.gameMoneyModel.unitName // 商品单位
      this.params.availableDay.oldAvailableDay = goods.availableDay // 发布期限
      this.goodsId = goods.bizOfferId
      this.query.gameName = goods.gameName
      if (this.query.gameName == '梦幻西游(手机游戏)') {
        this.params.roleLevel = goods.gameMoneyModel.roleLevel.toString() // 角色等级
      }
      this.params.qq = goods.contactQQ.toString() // qq号
      this.params.price = goods.price.toString() // 价格
      this.params.tel = goods.contactMobile.toString() // 手机号码
      // this.params.unitNum = goods.unitNum.toString()
      this.params.unitNum = goods.gameMoneyModel.numberCount.toString() // 发布件数
      this.params.deliveryNum = goods.stockTotal // 发布件数
    },
    ...mapActions({
      getUnit: 'MOBILE_GAME/GAME_UNIT',
      createCoinGoods: 'MOBILE_GAME/SELL_CREATE_COIN_GOODS',
    })
  }
}
</script>
<style>
.set_message_coin .order-container .input {
  height: 0.6rem;
  width: 55%;
  border: none;
  position: absolute;
  font-size: 0.3rem;
  top: 0.24rem;
  left: 2.4rem;
  line-height: 0.6rem;
}

 
</style>